<template>
  <div class="register-list  equipment-list">
    <div class="l">
      <!-- todo搜索表单 -->
      <h2 class="page-title">设备登记</h2>

      <search-box @search="onSearch" />
    </div>
    <div class="r" v-loading="loading">
      <div class="t">
        <el-button icon="el-icon-circle-plus" type="text" @click="$router.push('/main/register/add')">
          登记新设备
        </el-button>
        <ul class="status-list">
          <li v-for="d in statusList" :key="d.id">
            {{ d.name }}
            <span class="status-color" :style="{ background: d.color }"></span>
          </li>
        </ul>
      </div>
      <!-- 表格 -->
      <!-- :data要渲染的列表  prop每一个值 lable表格标题 -->
      <el-table :data="list">
        <el-table-column label="设备编号" prop="id"> </el-table-column>
        <el-table-column label="设备名称" prop="name"> </el-table-column>
        <el-table-column label="设备状态" prop="status" with="150">
          <!-- slot-scope使用子组上的数据 再element ui表格的单元格
            如果要手动插值绑定数据，需要使用slot-scope -->
          <!-- scope是 el-table-column 组件发送出来的变量-->
          <!-- 替换成文字 -->
          <template slot-scope="scope">
            <!-- {{scope.row.status}} -->
            <!-- {{$store.state.statusList.find(i=>i.id === scope.row.status).name}} -->
            <!-- {{statusObj[scope.row.status]}} -->
            {{ ($store.getters.statusObj[scope.row.status] || {}).name }}
            <span
              class="status-color"
              :style="{
                background: ($store.getters.statusObj[scope.row.status] || {})
                  .color,
              }"
            ></span>
          </template>
        </el-table-column>
        <el-table-column label="设备分类" prop="category">
          <!-- 替换成文字 -->
          <template slot-scope="scope">
            {{ $store.getters.categoryObj[scope.row.category] }}
          </template>
        </el-table-column>
        <el-table-column label="设备数量" prop="number"> </el-table-column>
        <el-table-column label="设备单价" prop="price"> </el-table-column>
        <el-table-column label="购置时间" prop="time"> </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button size="mini" @click="detail(scope.row.id)">详情</el-button>
            <template v-if="scope.row.status === 'STATUS1'">
              <el-button size="mini" type="primary"  @click="edit(scope.row.id)">编辑</el-button>
              <el-button size="mini" type="primary" @click="check(scope.row.id)" v-if="$store.state.role === 'admin'">审核</el-button>
            </template>
            <el-button
              size="mini"
              type="primary"
              v-if="$store.state.role === 'admin'"
              @click="approve(scope.row.id)"
              >入库</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="pageNo"
        :page-size.sync="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total,sizes,prev,pager,next,jumper"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import listMixin from "@/assets/mixins/list.js";
import SearchBox from "@/components/SearchBox.vue";
// 辅助函数 可以自动生成计算属性或者方法
import { mapState } from 'vuex';
export default {
  components: {
    SearchBox,
  },
  // mixin
  // 将复用的逻辑混入当前组件
  mixins:[listMixin],
  computed: {
    //
    // statusObj() {
    //   const obj = {};
    //   this.$store.state.statusList.forEach((i) => {
    //     obj[i.id] = i.name;
    //   });
    //   return obj;
    // },

    //写代码简洁 使用计算属性return出vuex
    // statusList(){
      // return this.$store.state.statusList
    // },
    //辅助函数
    ...mapState(['statusList'])
  },
  mounted(){
    console.log(this.statusList);
  },
  methods: {
    //编辑
    edit(id){
      this.$router.push(`/main/register/edit/${id}`)
    },
    // 子路由、嵌套理由跳转时候，条钻路径时候要写完整
    detail(id){
      this.$router.push(`/main/register/detail/${id}`)
    },
    // 请求数据
    getList() {
      this.loading = true;
      //页码和每页的条数
      const { pageNo, pageSize } = this;
      this.axios
        .post("/pre-list", {
          pageNo,
          pageSize,
          ...this.searchForm,
        })
        .then((data) => {
          if (!data.code) {
            this.list = data.data.list;
            this.total = data.data.total;
          }
        })
        .finally(() => {
          this.loading = false;//请求结束后加载动画结束
        });
    },
    // 每页展示的条数
    onSizeChange(size) {
      this.pageSize = size;
      this.pageNo = 1;
      this.getList();
    },
    // 页数
    onCurrentChange(page) {
      this.pageNo = page;
      this.getList();
    },
    //搜索
    onSearch(obj) {
      console.log(obj);
      this.searchForm = obj;
      this.pageNo = 1;
      this.getList();
    },
    // 审核
    check(id) {
      this.$confirm("您确定审核通过该条信息吗?", {
        confirmButtonText: "确定审核",
        cancelButtonText: "暂不操作",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post("/pre-check", {
              id,
            })
            .then((data) => {
              if (!data.code) {
                this.$message({
                  type: "success",
                  message: "审核成功!",
                });
                this.getList();
              }
            });
        })
        .catch(() => {});
    },
    // 入库
    approve(id) {
      this.$confirm("您确定入库通过该条信息吗?", {
        confirmButtonText: "确定入库",
        cancelButtonText: "暂不操作",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post("/pre-approve", {
              id,
            })
            .then((data) => {
              if (!data.code) {
                this.$message({
                  type: "success",
                  message: "入库成功!",
                });
                this.getList();
              }
            });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="sass" scoped>
  //sass的导入语法
  @import '../../assets/style/list.sass'
</style>
